<template>
  <div class="footer-wrapper" v-if="!route.meta.hideTabbar">
    <van-tabbar v-model="active" active-color="#ffc400" route placeholder>
      <van-tabbar-item to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/order" icon="orders-o">订单</van-tabbar-item>
      <van-tabbar-item to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item >
      <van-tabbar-item to="/mine" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
<!-- <div class="item"> 
      <router-link to="/home" class="nav-item" active-class="active-color">
        <van-icon name="wap-home-o" size="30"/>
        首页
      </router-link>
    </div>
    <div class="item">
      <router-link to="/order" class="nav-item" active-class="active-color">
        <van-icon name="orders-o" size="30"/>
        订单
      </router-link>
    </div>
    <div class="item">
      <router-link to="/cart" class="nav-item" active-class="active-color">
        <van-icon name="shopping-cart-o" size="30"/>
        购物车
      </router-link>
    </div>
    <div class="item">
      <router-link to="/mine" class="nav-item" active-class="active-color">
        <van-icon name="user-o" size="30"/>
        我的
      </router-link>
    </div>  -->
  </div>
</template>

<script setup>
import { ref } from "vue";
import {useRoute} from 'vue-router'

const route=useRoute()
const active = ref(0);

</script>

<style lang="less" scoped>
// .footer-wrapper {
  // position: fixed;
  // bottom: 0;
  // width: 100vw;
  // display: flex;
  // .item {
  //   flex: 1;
  //   .nav-item {
  //     display: flex;
  //     flex-direction: column;
  //     justify-content: center;
  //     align-items: center;
  //   }
  //   .active-color {
  //     color: yellow;
  //   }
  // }
// }
</style>